<template>
    <div class="user-avatar-dropdown">
        <Dropdown @on-click="handleClick">
            <Badge>
                <Avatar size="small" :src="userAvatar"/>
            </Badge>
            <span style="padding: 0 5px;">{{ userName }}</span>
            <DropdownMenu slot="list">
                <DropdownItem name="userCenter">个人中心</DropdownItem>
                <DropdownItem name="userSet">个人设置</DropdownItem>
                <DropdownItem name="logout">退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script>
    import './user.less'
    import {mapActions} from 'vuex'

    export default {
        name: 'User',
        props: {
            userAvatar: {
                type: String,
                default: ''
            },
            userName: {
                type: String,
                default: ''
            }
        },
        methods: {
            ...mapActions([
                'handleLogOut'
            ]),
            logout() {
                this.handleLogOut().then(() => {
                    this.$router.push({
                        name: 'login'
                    })
                })
            },
            handleClick(name) {
                switch (name) {
                    case 'logout':
                        this.logout()
                        break
                }
            }
        }
    }
</script>
